<!-- 一期所有样式和js都写入到html中 -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui,viewport-fit=cover"
    />
    <title>逗学教育</title>
    <link rel="stylesheet" href="../../common/css/vant.css" />
    <link rel="stylesheet" href="../../common/css/common.css" />
    <!-- 引入chapter组件样式 -->
    <link rel="stylesheet" href="../../widget/components/chapter/index.css" />
    <style>
      /*
			页面的所有css，必须有页面前缀
			如首页，则所有css以 .index- 开头
		 */
      .chapter-hr {
        height: 0.24rem;
        background-color: rgb(220, 220, 220);
      }

      /* 刷新按钮样式 换成图标后删除 */
      .chapter-replay {
        width: 0.4rem;
        height: 0.4rem;
        line-height: 0.4rem;
      }
      .wrong-replay-icon {
        width: 100%;
        height: 100%;
        vertical-align: middle;
      }

      /* 控制刷新过渡 */
      .notransform {
        transition: none;
        transform: rotate(0deg);
      }
      .transform {
        transition: 1s;
        transform: rotate(-720deg);
      }

      /* tab导航样式 */
      .van-ellipsis {
        font-size: 0.32rem;
        color: rgba(51, 51, 51, 1);
      }
      .van-tab--active .van-ellipsis {
        color: rgba(222, 42, 32, 1);
      }
      .van-tabs__line {
        width: 1.2rem;
        height: 0.04rem;
        background-color: rgba(222, 42, 32, 1);
      }

      /* 每个tab样式 */
      .wrong-van-tab-container {
        padding: 1.16rem 0.64rem 0;
      }

      .wrong-tab-item-container {
        margin-bottom: 0.48rem;
        color: #fff;
      }

      .wrong-tab-item-row {
        vertical-align: middle;
        margin-left: 0.2rem;
      }

      .common {
        height: 0.88rem;
        padding: 0 0.35rem 0 0.32rem;
        border-radius: 0.1rem;
      }
      .wrong-img-icon {
        width: 0.56rem;
        height: 0.56rem;
        margin-right: 0.48rem;
        vertical-align: middle;
        font-size: 0.32rem;
      }

      .common1 {
        background: linear-gradient(
          323deg,
          rgba(163, 161, 255, 1) 0%,
          rgba(102, 90, 255, 1) 100%
        );
      }
      .common2 {
        background: linear-gradient(
          323deg,
          rgba(255, 166, 125, 1) 0%,
          rgba(255, 97, 68, 1) 100%
        );
      }
      .common3 {
        background: linear-gradient(
          323deg,
          rgba(144, 213, 255, 1) 0%,
          rgba(75, 141, 255, 1) 100%
        );
      }
      .common4 {
        background: linear-gradient(
          323deg,
          rgba(255, 166, 125, 1) 0%,
          rgba(255, 97, 68, 1) 100%
        );
      }
      .common5 {
        background: linear-gradient(
          323deg,
          rgba(255, 210, 86, 1) 0%,
          rgba(255, 146, 23, 1) 100%
        );
      }

      .wron-loading {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: 20;
        background-color: #fff;
      }
      .van-loading {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
      }
    </style>
  </head>

  <body>
    <div id="app" v-cloak>
      <!-- *********************** 头 *******************************-->
      <div class="page-top">
        <div class="page-top">
          <div class="flex-wrap flex-justify-between flex-center-wrap header">
            <div class="header-row" @click="goBack">
              <img
                class="header-row-img"
                src="../../common/image/back.png"
                alt=""
              />
            </div>
            <div class="flex header-title">{{ title }}</div>
            <div class="header-right"></div>
          </div>
        </div>
      </div>
      <!--************************** 内容 *************************-->
      <div class="page-content">
        <div class="placeholder"></div>
        <!-- loading页面 -->
        <div v-if="isShowZLLoading" class="zl-loading">
          <img
            class="zl-loading-img"
            src="../../common/image/white.png"
            alt=""
          />
        </div>
        <van-tabs v-model="active" @click="tabsClick">
          <van-tab title="全部">
            <div class="wrong-van-tab-container">
              <div
                v-for="(item, index) of topicData"
                :key="index"
                class="wrong-tab-item-container"
              >
                <div
                  :class="'common'+item.typeid"
                  class="flex-wrap flex-justify-between flex-center-wrap common"
                  @click="goTo(item.total,item.typeid)"
                >
                  <div>
                    <span>
                      <img
                        class="wrong-img-icon"
                        :src="'./image/wrong/'+item.typeid+'.png'"
                        alt=""
                      />
                    </span>
                    {{ item.typename }}
                  </div>
                  <div>
                    {{ item.total }}
                    <span class="wrong-tab-item-row">
                      <van-icon name="arrow" />
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </van-tab>
          <van-tab title="最近七天">
            <div class="wrong-van-tab-container">
              <div
                v-for="(item, index) of topicData"
                :key="index"
                class="wrong-tab-item-container"
              >
                <div
                  :class="'common'+item.typeid"
                  class="flex-wrap flex-justify-between flex-center-wrap common"
                  @click="goTo(item.total,item.typeid)"
                >
                  <div>
                    <span>
                      <img
                        class="wrong-img-icon"
                        :src="'./image/wrong/'+item.typeid+'.png'"
                        alt=""
                      />
                    </span>
                    {{ item.typename }}
                  </div>
                  <div>
                    {{ item.total }}
                    <span class="wrong-tab-item-row">
                      <van-icon name="arrow" />
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </div>

    <script src="../../common/js/common.js"></script>
    <script src="../../common/js/vue.min.js"></script>
    <script src="../../common/js/vant.min.js"></script>
    <script src="../../common/js/http.js"></script>
    <script src="../../common/js/utils.js"></script>
    <script src="../../widget/service/exam.service.js"></script>
    <!-- 引入chapter组件 -->
    <script src="../../widget/components/chapter/index.js"></script>
    <script>
      // 注册 Lazyload 组件
      Vue.use(vant.Lazyload)
      //  注册 tab 组件
      Vue.use(vant.Tab).use(vant.Tabs)
      //  注册 Toast 组件
      Vue.use(vant.Toast)
      Vue.use(vant.Loading)

      new Vue({
        el: '#app',
        components: {
          'zl-chapter': chapter
        },
        data: {
          // 控制刷新按钮旋转
          noTransform: true,
          // 控制刷新按钮过渡
          transform: false,
          // 控制tab显示哪一个
          active: 0,
          // 请求回来的数据
          topicData: [],
          // 请求参数
          queryObj: {},
          // 请求多久的数据 0 为全部 1为7天
          timetype: 0,
          // 1为错题页面 2为收藏页面
          type: '',
          title: '',
          isShowZLLoading: true
        },
        computed: {},
        methods: {
          goBack() {
            location.replace('./topic.html')
          },
          goTo(total, typeid) {
            if (total === 0 || undefined) {
              this.$toast('当前分类下没有试题')
              return
            }
            window.location.href = `./wrongTest.html?typeid=${typeid}&&cateid=${this.queryObj.cateid}&&type=${this.type}`
          },
          tabsClick(index, title) {
            this.isShowZLLoading = true
            const tabsObj = this.queryObj
            if (this.type === 1) {
              if (title === '全部') {
                this.timetype = 0
                tabsObj.timetype = 0
                examService.getWrongIndexInfo(tabsObj).then(res1 => {
                  this.topicData = res1
                  this.isShowZLLoading = false
                  this.$nextTick(function() {})
                })
              } else {
                this.timetype = 1
                tabsObj.timetype = 1
                examService.getWrongIndexInfo(tabsObj).then(res2 => {
                  this.topicData = res2
                  this.isShowZLLoading = false
                  this.$nextTick(function() {})
                })
              }
            } else {
              if (title === '全部') {
                this.timetype = 0
                tabsObj.timetype = 0
                examService.getCollectIndexInfo(tabsObj).then(res3 => {
                  this.topicData = res3
                  this.isShowZLLoading = false
                  this.$nextTick(function() {})
                })
              } else {
                this.timetype = 1
                tabsObj.timetype = 1
                examService.getCollectIndexInfo(tabsObj).then(res4 => {
                  this.topicData = res4
                  this.isShowZLLoading = false
                  this.$nextTick(function() {})
                })
              }
            }
          }
        },
        created() {
          const queryObj = utils.getQuery(location.href)
          this.queryObj = queryObj
          this.type = Number(queryObj.type)
          // type为1时是从错题按钮那里跳转来的 type为2时是从收藏那里跳转来的
          if (Number(queryObj.type) === 1) {
            this.title = '错题本'
            examService
              .getWrongIndexInfo({ cateid: queryObj.cateid, timetype: 0 })
              .then(res => {
                this.topicData = res
                this.isShowZLLoading = false
              })
          }
          if (Number(queryObj.type) === 2) {
            this.title = '收藏'
            examService
              .getCollectIndexInfo({ cateid: queryObj.cateid, timetype: 0 })
              .then(res2 => {
                this.topicData = res2
                this.isShowZLLoading = false
              })
          }
        }
      })
    </script>
  </body>
</html>
